<template>
	<view class="bx-pagantion bg-white padding">
		<uni-row class="bx-pagination">
			<uni-pagination v-model="actionPageNo" :total="inpage.total" :pageSize="inpage.rownumber" :show-icon="true" @change="onclick" title="标题文字" />
		</uni-row>
	</view>
</template>

<script>
	export default {
		name:"bx-pagination",
		data() {
			return {
				actionPageNo:1   //用户页码
			};
		},
		computed:{
			pageNos:function(){
				let pageNo = this.inpage
				let str = []
				let allPage = 1
				if(pageNo.hasOwnProperty("total") && pageNo.hasOwnProperty("rownumber")){
					allPage =  Math.ceil(pageNo.total / pageNo.rownumber)
				}
				for(let i=0;i<allPage;i++){
					str.push(i+1)
				}
				return str
			}
		},
		props:{
			inpage:{
				type:Object,
				default:function(){
					return {}
				}
			}
		},
		methods:{
			nextClick(e){
				let self = this
				console.log("nextClick",e)
				let pageNo = self.actionPageNo
				if((pageNo + e) <= this.pageNos.length){
					this.actionPageNo= this.actionPageNo+ e
				}
			},
			prevClick(e){
				let self = this
				console.log("prevClick",e)
				let pageNo = self.actionPageNo
				if((pageNo + e) >= 1){ 
					this.actionPageNo= this.actionPageNo+ e
				}
			},
			onclick(e){
				let type = e.type
				let current = e.current
				console.log(type,current)
			}
		},
		watch: {
			"actionPageNo":{
				deep:true,
				handler:function(newValue, oldValue) {
					console.log(newValue,oldValue)
				     if(newValue !== oldValue){
						 this.$emit("on-page-change",newValue)
					 }
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.uni-pagination{
		justify-content: flex-end;
    // position: fixed;
    right: 0;
    bottom: 0;
    background-color: #fff;
    // z-index: 999;
    width: 100%;
    padding: 1rem;
		.uni-pagination__num-current{
			
			.uni-pagination__num-tag{
				width:6rem;
			}
			.uni-pagination__num-tag,.page--active{
			    color: #fff;
			    background-color:#38C09E !important;
			}
		}
			
	}
	

</style>